<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定多选按钮</title>
</head>
<body>
<div id="app">
    <form>
        <!--    选中多选之后，下一步按钮状态可用  -->
        <input type="checkbox" name="agree" id="agree" v-model="isAgree"><label for="agree">同意此协议</label>
        <br>
        <button v-bind:disabled="!isAgree">下一步</button>

        <h2>{{ isAgree }}</h2>
    </form>

    <hr>

    <form action="">
        <h2>请选中你的爱好</h2>
        <input type="checkbox" name="hobbies" id="basketball" value="篮球" v-model="hobbies"><label
            for="basketball">篮球</label>
        <input type="checkbox" name="hobbies" id="football" value="足球" v-model="hobbies"><label
            for="football">足球</label>
        <input type="checkbox" name="hobbies" id="pingping" value="乒乓球" v-model="hobbies"><label
            for="pingping">乒乓球</label>
        <input type="checkbox" name="hobbies" id="badminton" value="羽毛球" v-model="hobbies"><label
            for="badminton">羽毛球</label>

        <h2>您当前选中的爱好是：{{ hobbies }}</h2>
    </form>
</div>
<script type="module">
    import {createApp, ref, reactive} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
            setup() {
                let isAgree = ref(false)
                let hobbies = ref([])
                return {
                    isAgree,
                    hobbies,
                }
            }
        }
    )

    app.mount("#app")
</script>
</body>
</html>